<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			
			body {
				width: 600px;
				margin: 0px 400px;
				position: relative;
			}
			
			.shang {
				position: absolute;
				top: 520px;
				left: 0px;
			}
			
			.xia {
				position: absolute;
				top: 520px;
				left: 500px;
			}
		</style>
	</head>
	<!--准备5张图片，将图片起名为"1.jpg","2.jpg"..."5.jpg" 首先显示第一图片，然后向页面添加上一张、下一张按钮
	 要求点击下一张图片，切换到下一张图片，如果没有上一张或下一张则显示 “已经是第一张”或“已经是最后一张”-->

	<body>
		<div class="clearfix">
			<img src="../image/1.jpg" width="500" height="500" id="pi" />
			<input type="button" value="上一张" onclick="shangYiZhang()" class="shang" id="but1" />
			<input type="button" value="下一张" onclick="xiaYiZhang()" class="xia" id="but2" />
			<div id="d3" style="text-align: center;"></div>
		</div>
		<script>
			var i = 1;
			var xiaYiZhang = function() {
				i++;
				pi.src = "../image/" + i + ".jpg";
				if(i == 5) {
					d3.innerHTML = "已经是最后一张";
					i = 1;
				} else {
					d3.innerHTML = "";
				}
			}
			var shangYiZhang = function() {
				i--;
				pi.src = "../image/" + i + ".jpg";
				if(i == 1) {
					d3.innerHTML = "已经是第一张";
					i = 5;
				} else {
					d3.innerHTML = "";
				}
			}
		</script>
	</body>

</html>